<template>
  <u-popup
    mode="bottom"
    v-model="visible"
    :mask-close-able="maskCloseAble"
    border-radius="20"
    @close="onPopupClose"
  >
    <view class="popup-header">
      <div class="popup-header-text" v-if="title">{{ title }}</div>
      <image
        class="close-icon"
        mode="aspectFit"
        src="../../static/images_qccx/close.png"
        @click="() => (visible = false)"
      />
    </view>
    <u-line color="#E7E7E7FF" margin="0" />
    <view class="content">
      <slot />
    </view>
    <view class="popup-footer" v-if="showSubmit">
      <u-button
        type="primary"
        class="custom-button"
        @click="onSubmitClick"
        :loading="submitLoading"
        >{{ submitText }}</u-button
      >
    </view>
  </u-popup>
</template>
<script>
export default {
  props: {
    value: Boolean,
    title: String,
    showSubmit: {
      type: Boolean,
      default: true,
    },
    submitText: {
      type: String,
      default: "确定",
    },
    submitFn: Function,
    maskCloseAble: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      submitLoading: false,
    };
  },
  computed: {
    visible: {
      get() {
        return this.value;
      },
      set(val) {
        this.$emit("input", val);
      },
    },
  },
  methods: {
    onSubmitClick() {
      if (this.submitFn) {
        this.submitLoading = true;
        this.submitFn().then(() => {
          this.submitLoading = false;
          this.visible = false;
          this.$emit("submit");
        }).catch(() => {
          this.submitLoading = false;
        })
      } else {
        this.visible = false;
        this.$emit("submit");
      }
    },
    onPopupClose() {
      this.$emit('close')
    }
  },
};
</script>
<style lang="scss" scoped>
.popup-header {
  height: 112rpx;
  line-height: 112rpx;
  text-align: center;
  position: relative;
  .popup-header-text {
    font-weight: 600;
    font-size: 32rpx;
    color: #1a1a1a;
  }
  .close-icon {
    position: absolute;
    right: 32rpx;
    top: 32rpx;
    width: 48rpx;
    height: 48rpx;
  }
}
.popup-footer {
  margin: 80rpx;
  .custom-button {
    border: 2rpx solid #ff874fff !important;
    background-color: #ff874fff !important;
    color: #fff !important;
  }
}
</style>
